<template>
  <div class="artist-list-container">
    <!-- 页面标题和操作栏 -->
    <div class="page-header">
      <h2 class="page-title">京剧艺术家管理</h2>
      <div class="page-actions">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddArtist">添加艺术家</el-button>
        <el-input
          placeholder="搜索艺术家姓名"
          v-model="searchQuery"
          class="search-input"
          prefix-icon="el-icon-search"
          clearable
          @clear="loadArtistList"
          @keyup.enter.native="searchArtists"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchArtists"></el-button>
        </el-input>
      </div>
    </div>

    <!-- 艺术家列表表格 -->
    <el-card shadow="hover" class="table-card">
      <el-table :data="artistList" border stripe style="width: 100%" v-loading="loading" class="artist-table"
        :show-header="true" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }">
        <el-table-column prop="artistId" label="ID" width="250" align="center"></el-table-column>
        <el-table-column prop="artistName" label="姓名" width="200" align="center"></el-table-column>
        <el-table-column prop="categoryName" label="行当" width="200" align="center">
          <template slot-scope="scope">
            <el-tag v-for="(item, index) in scope.row.categoryName.split(',')" :key="index" size="mini" style="margin: 2px">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="schoolName" label="流派" width="200" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" align="center"></el-table-column>
        <el-table-column prop="createUser" label="创建人" width="200" align="center"></el-table-column>

        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-edit"
                @click="handleEditArtist(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="查看详情" placement="top">
              <el-button type="info" size="mini" icon="el-icon-view" @click="handleViewArtist(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete"
                @click="handleDeleteArtist(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" background></el-pagination>
      </div>
    </el-card>

    <!-- 添加/编辑艺术家对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
      :before-close="handleDialogClose" class="artist-form-dialog">
      <el-form :model="artistForm" :rules="artistRules" ref="artistForm" label-width="120px" class="artist-form">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="基本信息" name="basic">
            <div class="tab-content">
              <div class="tab-header">
                <h3 class="tab-title">基本信息管理</h3>
              </div>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="艺术家姓名" prop="artistName">
                    <el-input v-model="artistForm.artistName" placeholder="请输入艺术家姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="行当" prop="categoryId">
                    <el-select v-model="artistForm.categoryId" placeholder="请选择行当" style="width: 100%" multiple>
                      <el-option v-for="item in categoryOptions" :key="item.categoriesId" :label="item.categoriesName"
                        :value="item.categoriesId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="流派" prop="schoolId">
                    <el-select v-model="artistForm.schoolId" placeholder="请选择流派" style="width: 100%">
                      <el-option v-for="item in schoolOptions" :key="item.schoolId" :label="item.schoolName"
                        :value="item.schoolId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出生日期" prop="birthTime">
                    <el-date-picker v-model="artistForm.birthTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd" style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="逝世日期" prop="deathTime">
                    <el-date-picker v-model="artistForm.deathTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd" style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="艺术家头像" prop="avatar">
                    <el-upload class="avatar-uploader" action="http://localhost:9002/api/system/image/imageArtist" :show-file-list="false"
                      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                      <img v-if="artistForm.avatar" :src="artistForm.avatar" class="avatar-image">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="upload-tip">请上传艺术家肖像照片，建议尺寸不小于200×200像素，JPG、PNG格式</div>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="艺术家简介" prop="description">
                <el-input type="textarea" v-model="artistForm.description" placeholder="请输入艺术家简介" :rows="4"></el-input>
              </el-form-item>
              
              <!-- 在基本信息页签内添加确认和取消按钮 -->
              <div class="tab-footer-buttons">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitArtistForm" :loading="submitLoading">确 定</el-button>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="代表作品" name="works">
            <div class="tab-content">
              <div class="tab-header">
                <h3 class="tab-title">代表作品管理</h3>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addWorkItem">添加代表作品</el-button>
              </div>

              <!-- 代表作品列表 -->
              <el-empty v-if="artistWorks.length === 0" description="暂无代表作品数据" :image-size="120">
                <!-- <el-button type="primary" @click="addWorkItem">添加作品</el-button> -->
              </el-empty>

              <div v-else class="works-list">
                <el-card v-for="(work, index) in artistWorks" :key="index" class="work-item-card" shadow="hover">
                  <div class="work-card-header">
                    <span class="work-title">{{ work.workTitle }}</span>
                    <div class="work-actions">
                      <el-button type="primary" size="mini" icon="el-icon-edit" circle
                        @click="handleEditWork(index, work)"></el-button>
                      <el-button type="danger" size="mini" icon="el-icon-delete" circle
                        @click="handleDeleteWork(index)"></el-button>
                    </div>
                  </div>
                  <div class="work-card-content">
                    <div class="work-image-container" v-if="work.workUrl">
                      <img :src="work.workUrl" alt="作品图片" class="work-image-preview">
                    </div>
                    <div class="work-details">
                      <div class="work-info"><strong>角色:</strong> {{ work.roleName || '未设置' }}</div>
                      <div class="work-info"><strong>简介:</strong> {{ work.description || '暂无简介' }}</div>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="艺术特点" name="features">
            <div class="tab-content">
              <div class="tab-header">
                <h3 class="tab-title">艺术特点管理</h3>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addFeatureItem">添加艺术特点</el-button>
              </div>

              <!-- 艺术特点列表 -->
              <el-empty v-if="artistFeatures.length === 0" description="暂无艺术特点数据" :image-size="120">
                <!-- <el-button type="primary" @click="addFeatureItem">添加特点</el-button> -->
              </el-empty>

              <div v-else class="features-list">
                <el-card v-for="(feature, index) in artistFeatures" :key="index" class="feature-item-card"
                  shadow="hover">
                  <div class="feature-card-header">
                    <span class="feature-title">{{ feature.title }}</span>
                    <div class="feature-actions">
                      <el-button type="primary" size="mini" icon="el-icon-edit" circle
                        @click="handleEditFeature(index, feature)"></el-button>
                      <el-button type="danger" size="mini" icon="el-icon-delete" circle
                        @click="handleDeleteFeature(index)"></el-button>
                    </div>
                  </div>
                  <div class="feature-card-content">
                    <p class="feature-description">{{ feature.description }}</p>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="历史图片" name="images">
            <div class="tab-content">
              <div class="tab-header">
                <h3 class="tab-title">历史图片管理</h3>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addImageItem">添加历史图片</el-button>
              </div>

              <!-- 历史图片列表 -->
              <el-empty v-if="artistImages.length === 0" description="暂无历史图片数据" :image-size="120">
                <!-- <el-button type="primary" @click="addImageItem">添加图片</el-button> -->
              </el-empty>

              <div v-else class="images-list">
                <el-card v-for="(image, index) in artistImages" :key="index" class="image-item-card" shadow="hover">
                  <div class="image-card-header">
                    <span class="image-title">历史图片 #{{ index + 1 }}</span>
                    <div class="image-actions">
                      <el-button type="primary" size="mini" icon="el-icon-edit" circle
                        @click="handleEditImage(index, image)"></el-button>
                      <el-button type="danger" size="mini" icon="el-icon-delete" circle
                        @click="handleDeleteImage(index)"></el-button>
                    </div>
                  </div>
                  <div class="image-card-content">
                    <div class="history-image-container">
                      <img :src="image.url" alt="历史图片" class="history-image-preview">
                    </div>
                    <div class="image-description">
                      <p>{{ image.description || '暂无描述' }}</p>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>

    <!-- 艺术家详情对话框 -->
    <el-dialog title="艺术家详情" :visible.sync="detailsVisible" width="70%" class="artist-details-dialog">
      <div v-if="currentArtist" class="artist-details">
        <div class="artist-header">
          <div class="artist-avatar-container">
            <img :src="currentArtist.avatar" alt="艺术家头像" class="artist-detail-avatar">
          </div>
          <div class="artist-basic-info">
            <h2 class="artist-name">{{ currentArtist.artistName }}</h2>
            <p class="artist-meta">
              <span class="meta-item">
                <i class="el-icon-date"></i>
                {{ currentArtist.birthTime }} - 
                <span v-if="currentArtist.deathTime">{{ currentArtist.deathTime }}</span>
                <span v-else>至今</span>
              </span>
              <span class="meta-item">
                <i class="el-icon-s-custom"></i>
                <el-tag v-for="(item, index) in currentArtist.categoryName ? currentArtist.categoryName.split(',') : []" 
                  :key="'c'+index" size="mini" style="margin: 2px">
                  {{ item }}
                </el-tag>
              </span>
              <span class="meta-item">
                <i class="el-icon-collection"></i>
                {{ currentArtist.schoolName }}
              </span>
            </p>
          </div>
        </div>

        <el-divider content-position="left">个人介绍</el-divider>
        <p class="artist-bio">{{ currentArtist.description || '暂无介绍' }}</p>

        <el-tabs v-model="detailActiveTab" type="card">
          <el-tab-pane label="代表作品" name="works">
            <div v-if="artistWorks && artistWorks.length > 0" class="works-grid">
              <el-card v-for="(work, index) in artistWorks" :key="index" class="work-detail-card" shadow="hover">
                <div class="work-card-img" v-if="work.workUrl">
                  <img :src="work.workUrl" :alt="work.workTitle">
                </div>
                <div class="work-card-content">
                  <h4 class="work-title">{{ work.workTitle }}</h4>
                  <p class="work-role">饰演角色: {{ work.roleName }}</p>
                  <p class="work-desc">{{ work.description || '暂无简介' }}</p>
                </div>
              </el-card>
            </div>
            <el-empty v-else description="暂无代表作品" :image-size="120"></el-empty>
          </el-tab-pane>
          
          <el-tab-pane label="艺术特点" name="features">
            <div v-if="artistFeatures && artistFeatures.length > 0" class="features-grid">
              <div v-for="(feature, index) in artistFeatures" :key="index" class="feature-card">
                <h4 class="feature-title">{{ feature.title }}</h4>
                <p class="feature-desc">{{ feature.description }}</p>
              </div>
            </div>
            <el-empty v-else description="暂无艺术特点" :image-size="120"></el-empty>
          </el-tab-pane>
          
          <el-tab-pane label="历史图片" name="images">
            <div v-if="artistImages && artistImages.length > 0" class="images-grid">
              <el-card v-for="(image, index) in artistImages" :key="index" class="image-detail-card" shadow="hover">
                <div class="image-card-img">
                  <img :src="image.url" alt="历史图片">
                </div>
                <div class="image-card-content">
                  <p class="image-desc">{{ image.description || '暂无描述' }}</p>
                </div>
              </el-card>
            </div>
            <el-empty v-else description="暂无历史图片" :image-size="120"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 作品对话框 -->
    <el-dialog :title="workDialogTitle" :visible.sync="workDialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="workForm" :rules="workRules" ref="workForm" label-width="100px">
        <el-form-item label="作品名称" prop="workTitle">
          <el-input v-model="workForm.workTitle" placeholder="请输入作品名称"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="workForm.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="作品图片" prop="workUrl">
          <el-upload class="work-uploader" action="http://localhost:9002/api/system/image/imageArtistWork" :show-file-list="false"
            :on-success="handleWorkImageSuccess" :before-upload="beforeWorkImageUpload"
            :http-request="customUploadWork">
            <img v-if="workForm.workUrl" :src="workForm.workUrl" class="work-image">
            <i v-else class="el-icon-plus upload-icon"></i>
          </el-upload>
          <div class="upload-tip">请上传作品图片，建议尺寸不小于400×300像素，JPG、PNG格式</div>
        </el-form-item>
        <el-form-item label="作品简介" prop="description">
          <el-input type="textarea" v-model="workForm.description" :rows="3" placeholder="请输入作品简介"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="workDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitWorkForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 艺术特点对话框 -->
    <el-dialog :title="featureDialogTitle" :visible.sync="featureDialogVisible" width="50%"
      :close-on-click-modal="false">
      <el-form :model="featureForm" :rules="featureRules" ref="featureForm" label-width="100px">
        <el-form-item label="特点标题" prop="title">
          <el-input v-model="featureForm.title" placeholder="请输入特点标题"></el-input>
        </el-form-item>
        <el-form-item label="特点描述" prop="description">
          <el-input type="textarea" v-model="featureForm.description" :rows="3" placeholder="请输入特点描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="featureDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFeatureForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 历史图片对话框 -->
    <el-dialog :title="imageDialogTitle" :visible.sync="imageDialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="imageForm" :rules="imageRules" ref="imageForm" label-width="100px">
        <el-form-item label="图片描述" prop="description">
          <el-input type="textarea" v-model="imageForm.description" :rows="3" placeholder="请输入图片描述"></el-input>
        </el-form-item>
        <el-form-item label="历史图片" prop="url">
          <el-upload class="history-image-uploader" action="http://localhost:9002/api/system/image/imageArtistHistory" :show-file-list="false"
            :on-success="handleHistoryImageSuccess" :before-upload="beforeHistoryImageUpload"
            :http-request="customUploadHistoryImage">
            <img v-if="imageForm.url" :src="imageForm.url" class="history-image">
            <i v-else class="el-icon-plus upload-icon"></i>
          </el-upload>
          <div class="upload-tip">请上传历史图片，建议尺寸不小于500×300像素，JPG、PNG格式</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="imageDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitImageForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'ArtistList',
  data() {
    return {
      // 艺术家列表数据
      artistList: [],
      loading: false,
      searchQuery: '',

      // 分页参数
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

      // 对话框控制
      dialogVisible: false,
      detailsVisible: false,
      dialogTitle: '添加艺术家',
      isAddMode: true,
      submitLoading: false,

      // 当前编辑/查看的艺术家
      currentArtist: null,

      // 表单数据
      artistForm: {
        artistId: '',
        artistName: '',
        categoryId: [],
        categoryName: '',
        schoolId: '',
        schoolName: '',
        birthTime: '',
        deathTime: '',
        avatar: '',
        description: '',
        token: localStorage.getItem('token')
      },

      // 表单验证规则
      artistRules: {
        artistName: [
          { required: true, message: '请输入艺术家姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择行当', trigger: 'change' },
          { type: 'array', min: 1, message: '请至少选择一个行当', trigger: 'change' }
        ],
        schoolId: [
          { required: true, message: '请选择流派', trigger: 'change' }
        ],
        birthTime: [
          { required: false, message: '请选择出生日期', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入艺术家简介', trigger: 'blur' }
        ]
      },

      // 行当选项
      categoryOptions: [],
      // 流派选项
      schoolOptions: [],

      // 作品相关
      artistWorks: [],
      workDialogVisible: false,
      workDialogTitle: '添加代表作品',
      workForm: {
        workId: '',
        artistId: '',
        workTitle: '',
        roleName: '',
        workUrl: '',
        description: ''
      },
      workRules: {
        workTitle: [
          { required: true, message: '请输入作品名称', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      currentWorkIndex: -1,

      // 艺术特点相关
      artistFeatures: [],
      featureDialogVisible: false,
      featureDialogTitle: '添加艺术特点',
      featureForm: {
        showfeatureId: '',
        artistId: '',
        title: '',
        description: ''
      },
      featureRules: {
        title: [
          { required: true, message: '请输入特点标题', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入特点描述', trigger: 'blur' }
        ]
      },
      currentFeatureIndex: -1,

      // 历史图片相关
      artistImages: [],
      imageDialogVisible: false,
      imageDialogTitle: '添加历史图片',
      imageForm: {
        historyId: '',
        artistId: '',
        url: '',
        description: ''
      },
      imageRules: {
        url: [
          { required: true, message: '请上传历史图片', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入图片描述', trigger: 'blur' }
        ]
      },
      currentImageIndex: -1,

      // 表单控制
      activeTab: 'basic',

      // 详情页标签
      detailActiveTab: 'works',
    }
  },
  async created() {
    this.loading = true;
    try {
      // 先加载行当和流派选项
      await Promise.all([
        this.loadCategoryOptions(),
        this.loadSchoolOptions()
      ]);
      // 再加载艺术家列表
      await this.loadArtistList();
    } catch (err) {
      console.error('初始化数据失败:', err);
      this.$message.error('初始化数据失败');
    } finally {
      this.loading = false;
    }
  },
  methods: {
    // 获取艺术家列表
    loadArtistList() {
      this.loading = true
      const params = {
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        artistName: this.searchQuery
      }

      service.get('/api/content/artist/getArtistList', { params })
        .then(res => {
          if (res.code === 200) {
            console.log(res.data);
            this.artistList = res.data.list
            this.pagination.total = res.data.total

            // 处理行当和流派名称显示
            this.artistList.forEach(artist => {
              // 处理行当名称
              if (artist.categoryId) {
                // 将categoryId作为数组处理，获取名称
                artist.categoryName = this.getCategoryNames(artist.categoryId);
              }
              
              // 处理流派名称
              if (artist.schoolId) {
                artist.schoolName = this.getSchoolNameById(artist.schoolId);
              }
            });
          } else {
            this.$message.error(res.message || '获取艺术家列表失败')
          }
        })
        .catch(err => {
          console.error('获取艺术家列表失败', err)
          this.$message.error('获取艺术家列表失败')
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 修改getCategoryNames方法
    getCategoryNames(categoryIds) {
      if (!categoryIds || (Array.isArray(categoryIds) && categoryIds.length === 0)) {
        return '';
      }
      
      // 确保是数组
      let idArray = categoryIds;
      if (!Array.isArray(categoryIds)) {
        // 如果是字符串，尝试解析JSON
        if (typeof categoryIds === 'string') {
          try {
            idArray = JSON.parse(categoryIds);
          } catch (e) {
            // 如果不是有效的JSON格式，尝试按逗号分隔
            idArray = categoryIds.split(',').map(id => id.trim());
          }
        } else {
          // 其他类型转换为数组
          idArray = [categoryIds];
        }
      }
      
      // 从categoryOptions中查找对应的名称
      const names = idArray.map(id => {
        const category = this.categoryOptions.find(item => item.categoriesId === id || item.categoriesId === Number(id));
        return category ? category.categoriesName : id;
      }).filter(name => !!name); // 过滤掉空名称
      
      return names.join(',');
    },

    // 加载行当选项
    loadCategoryOptions() {
      return new Promise((resolve, reject) => {
        service.get('/api/content/category/getCategoryList', {
          params: {
            pageNum: 1,
            pageSize: 100 // 加载所有行当
          }
        }).then(res => {
          if (res.code === 200) {
            this.categoryOptions = res.data.list;
            resolve();
          } else {
            console.error('获取行当列表失败');
            this.$message.error('获取行当列表失败');
            reject();
          }
        }).catch(error => {
          console.error('获取行当列表失败:', error);
          this.$message.error('获取行当列表失败：' + (error.message || '未知错误'));
          reject();
        });
      });
    },

    // 加载流派选项
    loadSchoolOptions() {
      return new Promise((resolve, reject) => {
        service.get('/api/content/school/getSchoolList', {
          params: {
            pageNum: 1,
            pageSize: 100 // 加载所有流派
          }
        }).then(res => {
          if (res.code === 200) {
            this.schoolOptions = res.data.list;
            resolve();
          } else {
            console.error('获取流派列表失败');
            this.$message.error('获取流派列表失败');
            reject();
          }
        }).catch(error => {
          console.error('获取流派列表失败:', error);
          this.$message.error('获取流派列表失败：' + (error.message || '未知错误'));
          reject();
        });
      });
    },

    // 根据流派ID获取流派名称
    getSchoolNameById(schoolId) {
      const school = this.schoolOptions.find(item => item.schoolId === schoolId);
      return school ? school.schoolName : schoolId; // 如果找不到对应的流派，则显示ID
    },

    // 搜索艺术家
    searchArtists() {
      this.pagination.currentPage = 1
      this.loadArtistList()
    },

    // 分页处理
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadArtistList()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadArtistList()
    },

    // 添加艺术家
    handleAddArtist() {
      this.isAddMode = true
      this.dialogTitle = '添加艺术家'
      this.resetArtistForm()
      this.dialogVisible = true
    },

    // 编辑艺术家
    handleEditArtist(row) {
      this.isAddMode = false
      this.dialogTitle = '编辑艺术家'
      this.artistForm = JSON.parse(JSON.stringify(row))
      
      // 如果行当存储为逗号分隔的字符串，转换为数组以供选择框使用
      if (typeof this.artistForm.categoryId === 'string' && this.artistForm.categoryId.includes(',')) {
        // categoryId是逗号分隔的字符串，直接将其分割为数组
        this.artistForm.categoryId = this.artistForm.categoryId.split(',').map(id => {
          // 尝试将ID转换为数字，因为选择框可能需要数字类型的值
          const numId = Number(id.trim());
          return isNaN(numId) ? id.trim() : numId;
        });
      } else if (this.artistForm.categoryId && !Array.isArray(this.artistForm.categoryId)) {
        // categoryId是单个值，将其包装为数组
        const id = this.artistForm.categoryId;
        const numId = Number(id);
        this.artistForm.categoryId = [isNaN(numId) ? id : numId];
      } else if (!this.artistForm.categoryId && this.artistForm.categoryName) {
        // 如果categoryId不存在但categoryName存在，通过名称查找ID
        const categoryNames = this.artistForm.categoryName.split(',');
        this.artistForm.categoryId = categoryNames.map(name => {
          const category = this.categoryOptions.find(opt => opt.categoriesName === name.trim());
          return category ? category.categoriesId : null;
        }).filter(id => id !== null);
      } else if (!this.artistForm.categoryId) {
        // 如果categoryId不存在，初始化为空数组
        this.artistForm.categoryId = [];
      }

      // 加载艺术家代表作品和特点
      this.loadArtistWorks(row.artistId);
      this.loadArtistFeatures(row.artistId);
      // 加载艺术家历史图片
      this.loadArtistImages(row.artistId);

      this.dialogVisible = true
    },

    // 查看艺术家详情
    handleViewArtist(row) {
      this.currentArtist = row

      // 加载艺术家代表作品和特点，用于详情页展示
      this.loadArtistWorks(row.artistId);
      this.loadArtistFeatures(row.artistId);
      // 加载艺术家历史图片
      this.loadArtistImages(row.artistId);

      this.detailsVisible = true
    },

    // 删除艺术家
    handleDeleteArtist(row) {
      this.$confirm('确定要删除该艺术家吗？此操作不可逆！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        service.delete(`/api/content/artist/deleteArtist/${row.artistId}`)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.loadArtistList()
            } else {
              this.$message.error(res.message || '删除失败')
            }
          })
          .catch(err => {
            console.error('删除艺术家失败', err)
            this.$message.error('删除艺术家失败')
          })
      }).catch(() => {
        // 取消删除
      })
    },

    // 提交艺术家表单
    submitArtistForm() {
      this.$refs.artistForm.validate(valid => {
        if (valid) {
          this.submitLoading = true

          const apiUrl = this.isAddMode ?
            '/api/content/artist/addArtist' :
            '/api/content/artist/updateArtist'

          // 处理表单数据，创建一个新对象避免修改原始表单数据
          const formData = JSON.parse(JSON.stringify(this.artistForm));

          // 处理行当数据
          if (formData.categoryId && Array.isArray(formData.categoryId) && formData.categoryId.length > 0) {
            // 获取所有选中行当的名称
            const categoryNames = formData.categoryId.map(id => {
              const category = this.categoryOptions.find(item => item.categoriesId === id);
              return category ? category.categoriesName : '';
            }).filter(name => name !== '');
            
            // 设置categoryName为逗号分隔的名称字符串
            formData.categoryName = categoryNames.join(',');
            
            // 将categoryId数组转换为逗号分隔的字符串形式给后端
            formData.categoryId = formData.categoryId.join(',');
          } else {
            // 如果没有选择行当，清空categoryName和categoryId
            formData.categoryName = '';
            formData.categoryId = '';
          }
          
          // 处理流派数据
          if (formData.schoolId) {
            const school = this.schoolOptions.find(item => item.schoolId === formData.schoolId);
            if (school) {
              formData.schoolName = school.schoolName;
            }
          }
          
          const submitData = {
            ...formData,
            works: this.artistWorks,
            features: this.artistFeatures,
            histories: this.artistImages,
            token: localStorage.getItem('token')
          }

          console.log('提交的数据：', submitData);

          const apiMethod = this.isAddMode ?
            service.post(apiUrl, submitData) :
            service.put(apiUrl, submitData)

          apiMethod
            .then(res => {
              if (res.code === 200) {
                this.$message.success(this.isAddMode ? '添加成功' : '更新成功')
                this.dialogVisible = false
                this.loadArtistList()
              } else {
                this.$message.error(res.message || (this.isAddMode ? '添加失败' : '更新失败'))
              }
            })
            .catch(err => {
              console.error(this.isAddMode ? '添加艺术家失败' : '更新艺术家失败', err)
              this.$message.error(this.isAddMode ? '添加艺术家失败' : '更新艺术家失败')
            })
            .finally(() => {
              this.submitLoading = false
            })
        }
      })
    },

    // 重置艺术家表单
    resetArtistForm() {
      this.artistForm = {
        artistId: '',
        artistName: '',
        categoryId: [],
        categoryName: '',
        schoolId: '',
        schoolName: '',
        birthTime: '',
        deathTime: '',
        avatar: '',
        description: '',
        token: localStorage.getItem('token')
      }
      // 清空作品、特点和图片列表
      this.artistWorks = [];
      this.artistFeatures = [];
      this.artistImages = [];

      if (this.$refs.artistForm) {
        this.$refs.artistForm.resetFields()
      }
    },

    // 关闭对话框
    handleDialogClose(done) {
      this.$confirm('确认关闭？未保存的内容将会丢失', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        done()
      }).catch(() => { })
    },

    // 头像上传成功
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.artistForm.avatar = res.data
      } else {
        this.$message.error('上传失败: ' + res.message)
      }
    },

    // 头像上传前检查
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt4M = file.size / 1024 / 1024 < 4

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt4M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt4M
    },


    // 加载艺术家代表作品
    loadArtistWorks(artistId) {
      service.get(`/api/content/artist/getArtistWorks/${artistId}`)
        .then(res => {
          if (res.code === 200) {
            this.artistWorks = res.data || [];
          } else {
            console.error('获取艺术家代表作品失败');
            this.$message.error('获取艺术家代表作品失败');
          }
        })
        .catch(err => {
          console.error('获取艺术家代表作品失败', err);
          this.$message.error('获取艺术家代表作品失败');
        });
    },

    // 加载艺术家特点
    loadArtistFeatures(artistId) {
      service.get(`/api/content/artist/getArtistFeatures/${artistId}`)
        .then(res => {
          if (res.code === 200) {
            this.artistFeatures = res.data || [];
          } else {
            console.error('获取艺术家特点失败');
            this.$message.error('获取艺术家特点失败');
          }
        })
        .catch(err => {
          console.error('获取艺术家特点失败', err);
          this.$message.error('获取艺术家特点失败');
        });
    },

    // 添加代表作品
    addWorkItem() {
      this.workDialogTitle = '添加代表作品';
      this.workForm = {
        workId: '',
        artistId: this.artistForm.artistId,
        workTitle: '',
        roleName: '',
        workUrl: '',
        description: ''
      };
      this.currentWorkIndex = -1;
      this.workDialogVisible = true;
    },

    // 编辑代表作品
    handleEditWork(index, row) {
      this.workDialogTitle = '编辑代表作品';
      this.workForm = { ...row };
      this.currentWorkIndex = index;
      this.workDialogVisible = true;
    },

    // 删除代表作品
    handleDeleteWork(index) {
      this.$confirm('确定要删除该代表作品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 直接从数组中删除数据，不调用API
        this.artistWorks.splice(index, 1);
        this.$message.success('删除成功');
      }).catch(() => { });
    },

    // 提交代表作品表单
    submitWorkForm() {
      this.$refs.workForm.validate(valid => {
        if (valid) {
          if (this.currentWorkIndex === -1) {
            // 添加新作品
            this.artistWorks.push({ ...this.workForm });
          } else {
            // 更新现有作品
            this.artistWorks.splice(this.currentWorkIndex, 1, { ...this.workForm });
          }
          this.workDialogVisible = false;
        }
      });
    },

    // 作品图片上传成功
    handleWorkImageSuccess(res) {
      if (res.code === 200) {
        this.workForm.workUrl = res.data;
      } else {
        this.$message.error('上传失败: ' + res.message);
      }
    },

    // 作品图片上传前检查
    beforeWorkImageUpload(file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt4M = file.size / 1024 / 1024 < 4;

      if (!isJPGOrPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt4M) {
        this.$message.error('上传图片大小不能超过 4MB!');
      }
      return isJPGOrPNG && isLt4M;
    },


    // 添加艺术特点
    addFeatureItem() {
      this.featureDialogTitle = '添加艺术特点';
      this.featureForm = {
        showfeatureId: '',
        artistId: this.artistForm.artistId,
        title: '',
        description: ''
      };
      this.currentFeatureIndex = -1;
      this.featureDialogVisible = true;
    },

    // 编辑艺术特点
    handleEditFeature(index, row) {
      this.featureDialogTitle = '编辑艺术特点';
      this.featureForm = { ...row };
      this.currentFeatureIndex = index;
      this.featureDialogVisible = true;
    },

    // 删除艺术特点
    handleDeleteFeature(index) {
      this.$confirm('确定要删除该艺术特点吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 直接从数组中删除数据，不调用API
        this.artistFeatures.splice(index, 1);
        this.$message.success('删除成功');
      }).catch(() => { });
    },

    // 提交艺术特点表单
    submitFeatureForm() {
      this.$refs.featureForm.validate(valid => {
        if (valid) {
          if (this.currentFeatureIndex === -1) {
            // 添加新特点
            this.artistFeatures.push({ ...this.featureForm });
          } else {
            // 更新现有特点
            this.artistFeatures.splice(this.currentFeatureIndex, 1, { ...this.featureForm });
          }
          this.featureDialogVisible = false;
        }
      });
    },

    // 加载艺术家历史图片
    loadArtistImages(artistId) {
      service.get(`/api/content/artist/getArtistHistories/${artistId}`)
        .then(res => {
          if (res.code === 200) {
            this.artistImages = res.data || [];
          } else {
            console.error('获取艺术家历史图片失败');
            this.$message.error('获取艺术家历史图片失败');
          }
        })
        .catch(err => {
          console.error('获取艺术家历史图片失败', err);
          this.$message.error('获取艺术家历史图片失败');
        });
    },

    // 添加历史图片
    addImageItem() {
      this.imageDialogTitle = '添加历史图片';
      this.imageForm = {
        historyId: '',
        artistId: this.artistForm.artistId,
        url: '',
        description: ''
      };
      this.currentImageIndex = -1;
      this.imageDialogVisible = true;
    },

    // 编辑历史图片
    handleEditImage(index, row) {
      this.imageDialogTitle = '编辑历史图片';
      this.imageForm = { ...row };
      this.currentImageIndex = index;
      this.imageDialogVisible = true;
    },

    // 删除历史图片
    handleDeleteImage(index) {
      this.$confirm('确定要删除该历史图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 直接从数组中删除数据，不调用API
        this.artistImages.splice(index, 1);
        this.$message.success('删除成功');
      }).catch(() => { });
    },

    // 提交历史图片表单
    submitImageForm() {
      this.$refs.imageForm.validate(valid => {
        if (valid) {
          if (this.currentImageIndex === -1) {
            // 添加新图片
            this.artistImages.push({ ...this.imageForm });
          } else {
            // 更新现有图片
            this.artistImages.splice(this.currentImageIndex, 1, { ...this.imageForm });
          }
          this.imageDialogVisible = false;
        }
      });
    },

    // 历史图片上传成功
    handleHistoryImageSuccess(res) {
      if (res.code === 200) {
        this.imageForm.url = res.data;
      } else {
        this.$message.error('上传失败: ' + res.message);
      }
    },

    // 历史图片上传前检查
    beforeHistoryImageUpload(file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt4M = file.size / 1024 / 1024 < 4;

      if (!isJPGOrPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt4M) {
        this.$message.error('上传图片大小不能超过 4MB!');
      }
      return isJPGOrPNG && isLt4M;
    },

    // 在获取艺术家详情的函数中
    loadArtistDetails(artistId) {
      service.get(`/api/content/artist/getArtistDetails/${artistId}`)
        .then(res => {
          if (res.code === 200) {
            this.currentArtist = res.data;
            // 处理逝世日期
            this.currentArtist.deathTime = this.currentArtist.deathTime || '至今';
          } else {
            console.error('获取艺术家详情失败');
          }
        })
        .catch(err => {
          console.error('获取艺术家详情失败', err);
        });
    },
  }
}
</script>

<style scoped>
.artist-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  color: #333;
  margin: 0;
  position: relative;
  padding-left: 15px;
}

.page-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #8B0000;
  border-radius: 2px;
}

.page-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 250px;
}

.table-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.artist-avatar {
  border-radius: 50%;
  border: 1px solid #eee;
  overflow: hidden;
  transition: all 0.3s;
}

.artist-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-image {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  text-align: center;
}

.artist-form {
  padding: 0 20px;
}

/* 艺术家详情样式 */
.artist-details {
  padding: 0 20px;
}

.artist-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.artist-avatar-container {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 25px;
  border: 4px solid #FFD700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.artist-detail-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-basic-info {
  flex: 1;
}

.artist-name {
  font-size: 24px;
  margin: 0 0 10px;
  color: #333;
}

.artist-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-item i {
  color: #8B0000;
}

.artist-bio,
.artist-works,
.artist-features {
  color: #666;
  line-height: 1.6;
  white-space: pre-line;
}

.el-divider__text {
  color: #8B0000;
  font-weight: bold;
}

.form-btn-group {
  margin-top: 10px;
  text-align: right;
}

.work-uploader {
  text-align: center;
}

.work-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 150px;
}

.work-uploader .el-upload:hover {
  border-color: #8B0000;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.work-image {
  width: 200px;
  height: 150px;
  display: block;
  object-fit: cover;
}

/* 详情页作品和特点展示 */
.works-grid,
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.work-card {
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
}

.work-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.work-card-img {
  height: 150px;
  overflow: hidden;
}

.work-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card-content {
  padding: 15px;
}

.work-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px;
  color: #333;
}

.work-role {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.work-time {
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}

.work-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.feature-card {
  border-left: 3px solid #8B0000;
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 3px;
}

.feature-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px;
  color: #8B0000;
}

.feature-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.artist-form-dialog>>>.el-dialog {
  max-width: 1200px;
}

.artist-form-dialog>>>.el-dialog__body {
  padding: 10px 20px;
}

.artist-form {
  margin: 15px 0;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.tab-title {
  margin: 0;
  font-size: 16px;
  color: #333;
  position: relative;
  padding-left: 12px;
}

.tab-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #8B0000;
  border-radius: 2px;
}

.form-normal-input {
  margin-bottom: 20px;
}

.works-list,
.features-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.work-item-card,
.feature-item-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

.work-item-card:hover,
.feature-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.work-card-header,
.feature-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.work-title,
.feature-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.work-actions,
.feature-actions {
  display: flex;
  gap: 8px;
}

.work-card-content {
  display: flex;
  gap: 15px;
}

.work-image-container {
  width: 120px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.work-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-details {
  flex: 1;
}

.work-info {
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.feature-description {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.upload-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}

.tab-content {
  padding: 20px;
}

.images-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.image-item-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

.image-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.image-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.image-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.image-actions {
  display: flex;
  gap: 8px;
}

.image-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-image-container {
  width: 100%;
  height: 180px;
  border-radius: 4px;
  overflow: hidden;
}

.history-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-description {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.history-image-uploader {
  text-align: center;
}

.history-image-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 180px;
}

.history-image-uploader .el-upload:hover {
  border-color: #8B0000;
}

.history-image {
  width: 300px;
  height: 180px;
  display: block;
  object-fit: cover;
}

/* 新增详情页样式 */
.images-grid, .works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.work-detail-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

.work-detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.image-detail-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

.image-detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.work-card-img, .image-card-img {
  height: 200px;
  overflow: hidden;
}

.work-card-img img, .image-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.work-card-img img:hover, .image-card-img img:hover {
  transform: scale(1.05);
}

.work-card-content, .image-card-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.work-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px;
  color: #333;
}

.work-role {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.work-desc, .image-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

/* 高亮表单验证 */
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-textarea__inner {
  border-color: #F56C6C;
}

.el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-textarea__inner {
  border-color: #67C23A;
}

/* 表单提示信息样式 */
.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  display: block;
}

/* 添加页面固定的底部导航栏 */
.fixed-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .works-grid,
  .features-grid,
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .el-form-item {
    margin-bottom: 18px;
  }
  
  .page-actions {
    flex-wrap: wrap;
  }
  
  .search-input {
    width: 100%;
    margin: 10px 0;
  }
}

/* 为基本信息页签内的按钮添加样式 */
.tab-footer-buttons {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}
</style>